/**
 * 通用工具类
 * 提供常用的辅助样式类
 */

// 边距
$spacer: 1rem;
$spacers: (
  0: 0,
  1: ($spacer * 0.25),
  2: ($spacer * 0.5),
  3: $spacer,
  4: ($spacer * 1.5),
  5: ($spacer * 3),
);

// 生成边距类
@each $prop, $abbrev in (margin: m, padding: p) {
  @each $size, $value in $spacers {
    .#{$abbrev}-#{$size} { #{$prop}: $value !important; }
    .#{$abbrev}t-#{$size} { #{$prop}-top: $value !important; }
    .#{$abbrev}r-#{$size} { #{$prop}-right: $value !important; }
    .#{$abbrev}b-#{$size} { #{$prop}-bottom: $value !important; }
    .#{$abbrev}l-#{$size} { #{$prop}-left: $value !important; }
    .#{$abbrev}x-#{$size} {
      #{$prop}-right: $value !important;
      #{$prop}-left: $value !important;
    }
    .#{$abbrev}y-#{$size} {
      #{$prop}-top: $value !important;
      #{$prop}-bottom: $value !important;
    }
  }
}

// 显示类
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

// Flex工具类
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

// 文本溢出处理
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 圆角
.rounded {
  border-radius: var(--border-radius) !important;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

// 边框
.border {
  border: 1px solid var(--border-color) !important;
}

.border-0 {
  border: 0 !important;
}

// 阴影
.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow {
  box-shadow: var(--shadow) !important;
}

.shadow-lg {
  box-shadow: var(--shadow-lg) !important;
}

.shadow-none {
  box-shadow: none !important;
}

// 宽度
.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

// 高度
.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

// 可见性
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

// 定位
.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: sticky !important;
} 